<template>
  <div>
    <div class="form_wrap">
      <div class="form_search">
        <el-input v-model="searchObj.userName"
                  placeholder="用户名"></el-input>
        <el-input v-model="searchObj.email"
                  placeholder="邮箱"></el-input>
        <el-input v-model="searchObj.phone"
                  placeholder="手机号"></el-input>
        <el-button type="primary"
                   @click="search">查询</el-button>
      </div>
      <div class="form_search">
        <el-input v-model="addemail"
                  placeholder="邮箱"></el-input>
        <el-input v-model="adduserName"
                  placeholder="用户名"></el-input>
        <el-input v-model="addphone"
                  placeholder="手机号"></el-input>
        <el-button type="success"
                   @click="addStudent">添加</el-button>
      </div>
    </div>

  </div>
</template>
<script>
import { addStudentApi } from '../../api/student'
import { mapActions } from 'vuex'
export default {
  name: "studentForm",
  data () {
    return {
      addemail: "",
      adduserName: "",
      addphone: "",
      searchObj: {  //查询条件
        email: "",
        userName: "",
        phone: ""
      }
    }
  },
  methods: {
    ...mapActions("studentStore", ["getStudentAction"]),
    async search () {
      this.getStudentAction({
        email: this.searchObj.email,
        userName: this.searchObj.userName,
        phone: this.searchObj.phone
      })
      // 查询完成清空输入框
      this.searchObj.userName = ""
      this.searchObj.phone = ""
      this.searchObj.email = ""
    },
    async addStudent () { //添加学员接口
      var res = await addStudentApi({
        addemail: this.addemail,
        adduserName: this.adduserName,
        addphone: this.addphone
      })
      console.log(res)
      if (res.success) {
        this.$alert("添加成功")
        this.addphone = ""
        this.addemail = ""
        this.adduserName = ""
        // this.$store.dispatch("studentStore/getStudentAction",{参数})
        this.getStudentAction({ pageStart: 1 })
      }
      if (res.err) {
        this.$alert(res.err)

      }
    }
  },
}
</script>
<style lang="less">
.form_wrap {
  width: 1300px;
  margin: 20px auto;
  background: white;
  height: 127px;
  overflow: hidden;
  .form_search {
    display: flex;
    margin: 20px 0;
    .el-input {
      width: 259px;
      margin-left: 20px;
    }
    .el-button {
      margin-left: 20px;
    }
  }
}
</style>